<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyWord" @custom="searchProduct" @search="searchProduct" placeholder="请输入寄售单号"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
			<view style="background-color: #fff;padding-bottom: 10rpx;">
				<!-- <u-tabs :list="tabList" :current="tabCurrentIndex" @click="tabClick"
					:activeStyle="{color:bgColor}" :lineColor="bgColor">
				</u-tabs> -->
				<tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="tabCurrentIndex"></tab-bar>
			</view>
		</view>

		<swiper class="tab-view" :duration="300" :current.sync="tabCurrentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<!-- 封装组件 -->
					<swiper-page-consign ref="tab" :tab="tab" @toDetailPage="toDetailPage"></swiper-page-consign>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<!-- <u-button type="primary" :color="bgColor" :plain="true" text="+ 新建寄售单"
					@click="goAddConsign()"></u-button> -->
				<button :color="bgColor" class="plain_bgColor"
					style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;" @click="goAddConsign()">+
					新建寄售单</button>
			</view>
		</view>

	</view>
</template>

<script>
	import tabBar from '@/components/tab-bar/tab-bar.vue';
	import swiperPageConsign from '../compontents/nvue-swiper-page-consign.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			swiperPageConsign,
			tabBar
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabList: [],
				tabCurrentIndex: 0,
				keyWord: '',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					state: 0,
					name: '全部',
					type: '', //必带类型
					orderList: []
				},
				{
					id: "tab12",
					state: 1,
					name: '待送货',
					type: 0,
					orderList: []
				},
				{
					id: "tab13",
					state: 2,
					name: '送货中',
					type: 1,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '已完成',
					type: 2,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '商户已取消',
					type: 3,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '仓库已取消',
					type: 4,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '平台已取消',
					type: 5,
					orderList: []
				}
			];
		},
		onShow() {
			//初始化页面
			if (this.$refs.tab) {
				for (let item of this.$refs.tab) {
					item.getConsignSaleList();
				}
			}
		},
		methods: {
			//tabs 标签切换事件
			tabClick(item) {
				this.tabCurrentIndex = item.index;
			},
			scrolltolowerFn() {
				this.$refs.tab[this.tabCurrentIndex].scrolltolowerFn();
			},
			//关键字查询
			searchProduct(value) {
				this.$refs.tab[this.tabCurrentIndex].searchProduct(value);
			},
			toDetailPage(item) {
				this.goPage('/pages/consignSale/consignSaleDetail/consignSaleDetail?data=' + JSON.stringify(item));
			},
			//去添加寄售
			goAddConsign() {
				this.goPage('/pages/consignSale/addConsignSale/addConsignSale');
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}
	
	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}
</style>